/**
 * a  customizable RN ActionSheet
 */
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  TouchableNativeFeedback,
  PixelRatio,
  ScrollView,
  Modal,
  Easing,
} from 'react-native';
import PropTypes from 'prop-types';

const MIN_WIDTH = 1 / PixelRatio.get();

class ActionSheet extends Component {
  constructor(props) {
    super(props);

    this.state = {
      sheetAnim: new Animated.Value(0), // translateY是Y轴的偏移量，向Y轴的负方向的偏移量
      shown: false,                     //是否处于显示状态
    };
  }

  componentWillUnmount() {
    clearTimeout(this._timerOut1);
  }

  // hide
  hide = () => {
    const { animationType } = this.props;
    Animated.timing(this.state.sheetAnim, {
      toValue: this.translateY,
      duration: 300,
      easing: animationType,
    }).start(this._toggleShown); // 这个函数必须放到start里面，否则没有动画效果
  };

  // show
  show = () => {
    this._timerOut1 = setTimeout(() => {
      this._toggleShown();
      this._showSheet();
    }, 100);
  };

  _showSheet = () => {
    const { animationType } = this.props;
    Animated.timing(this.state.sheetAnim, {
      toValue: 0,
      duration: 300,
      easing: animationType,
    }).start();
  };

  // // toggle
  _toggle = () => {
    if (this.state.shown) {
      this.hide();
    } else {
      this.show();
      // this._toggleShown();
    }
  };

  _toggleShown = () => {
    this.setState({
      shown: !this.state.shown,
    });
  };

  // 渲染button
  _renderButton = () => {
    const {
      funcs,
      actions,
      buttonHeight,
      rippleColor,
    } = this.props;
    return actions.map((val, i) => {
      return (
        <TouchableNativeFeedback
          onPress={funcs[i]}
          key={i}
          background={TouchableNativeFeedback.Ripple(rippleColor, false)}>
          <View
            style={[{ height: buttonHeight }, styles.buttonWrapper]}>
            {typeof val === 'string'
              ? <Text style={{ color: '#000', fontSize: 18, fontWeight: '300' }}>{val}</Text>
              : val
            }
          </View>
        </TouchableNativeFeedback>
      );
    });
  };

  // 渲染标题
  _renderTitle = () => {
    const { title } = this.props;
    return title.length === 0 ? null : (
      <View style={styles.title}>
        { typeof title === 'string'
          ? <Text style={{ fontSize: 13, color: '#777' }}>{title}</Text>
          : title
        }
      </View>
    );
  };

  render() {
    const {
      sheetAnim,
      shown,
    } = this.state;
    const {
      buttonComponentsHeight,
      buttonComponents,
      buttonHeight,
      buttonShows,
      actions,
      title,
    } = this.props;
    const titleHeight = title.length === 0 ? 0 : 34; // only '' will be 0, React.Component OR string will be 34
    let buttonsItemHeight = 0;
    if (!buttonComponents) {
      buttonsItemHeight = buttonHeight * (actions.length >= buttonShows ? buttonShows : actions.length);
    } else {
      buttonsItemHeight = buttonComponentsHeight;
    }
    this.translateY = buttonsItemHeight + titleHeight;
    return (
      <Modal
        animationType="fade"
        visible={shown}
        transparent
        onRequestClose={this._toggle}>
        <View style={styles.modalBack}>
          {/* 遮挡的overlay */}
          <Text onPress={this._toggle} style={styles.textOverlay} />
          <Animated.View
            style={[
              {
                height: this.translateY,
                transform: [{ translateY: sheetAnim }],
              },
              styles.animatedview,
            ]}>
            {this._renderTitle()}
            {buttonComponents
              ? buttonComponents
              :
              <ScrollView
                showsVerticalScrollIndicator={false}
                contentContainerStyle={{
                  backgroundColor: '#fff',
                }}>
                {this._renderButton()}
              </ScrollView>
            }
          </Animated.View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  buttonWrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: MIN_WIDTH,
    borderColor: '#ccc',
    backgroundColor: '#fff',
  },
  title: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 34,
    borderBottomWidth: MIN_WIDTH,
    borderColor: '#ccc',
    backgroundColor: '#fff',
  },
  modalBack: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'rgba(0,0,0,.2)',
  },
  textOverlay: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
  },
  animatedview: {
    flex: 1,
    alignSelf: 'flex-end',
    borderTopWidth: MIN_WIDTH,
    borderColor: '#ccc',
    backgroundColor: '#fff',
    elevation: 5,
  },
});

ActionSheet.defaultProps = {
  funcs: [],                              // 对应的条目的函数
  actions: [],                            // 操作名
  title: '',                              // ActionSheet的标题名
  buttonShows: 6,                         // 展示的button的个数
  buttonHeight: 50,                       // 单个item的高度
  buttonComponents: null,                 // 自己定制
  buttonComponentsHeight: 150,            // 自己定制的时候的actionsheet高度
  animationType: Easing.inOut(Easing.ease),  // 动画类型
  rippleColor: '#108eeb',                 // 按钮点击的时候的ripple color
};
ActionSheet.propTypes = {
  funcs: PropTypes.arrayOf(PropTypes.func),
  actions: PropTypes.arrayOf(PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
  ])),
  title: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
  ]),
  buttonShows: PropTypes.number,
  buttonHeight: PropTypes.number,
  buttonComponents: PropTypes.element,
  buttonComponentsHeight: PropTypes.number,
  animationType: PropTypes.any,
  rippleColor: PropTypes.string,    // 按钮点击的时候的ripple color
};


export default ActionSheet;
